<!-- 邀请好友绑定 -->
<template>
  <div class="page">
      <div class="normal-user" v-if="status == 1">
          <h2>您为普通用户</h2>
          <h3>请输入超级节点邀请码来成为矿工</h3>
          <!--<h4>可前往官网cvn.io【CVNT挖矿】的【超级节点】页面获取邀请码</h4>-->
          <div class="input-wrapper">
              <input v-model.trim="invitationCode" type="text" placeholder="输入超级节点邀请码" />
              <span @click="submitInvitationCode">确认</span>
          </div>
      </div>
      <div class="normal-user miner-user" v-if="status == 2">
          <p>超级节点邀请码:{{superNodeUid}}</p>
          <h2>您已是一名矿工</h2>
          <h3>可点击下方学习挖矿教程</h3>
      </div>
      <div class="normal-user node-user" v-if="status == 3">
        <h2>您已是一个超级节点</h2>
        <h3>可点击下方学习挖矿教程</h3>
      </div>
      <div @click="goRouterMiner" class="router-miner" :class="{'normal': status == 1}">
          <div class="content">
            <img src="~assets/images/node/router.png" alt="" />
            <div class="text">
                <!--<p>暂未开放</p>-->
                <!--<h2>路由器挖矿质押</h2>
                <h3>已质押 {{router.pledgeCvnt}}CVNT</h3>-->
                <h2>路由器挖矿</h2>
                <h3>点击查看教程</h3>
            </div>
          </div>
      </div>
      <div @click="goLinuxMiner" class="router-miner linux-miner">
          <div class="content">
              <img src="~assets/images/node/linux.png" alt="" />
              <div class="text">
                  <!--<p>暂未开放</p>-->
                  <!--<h2>Linux挖矿质押</h2>
                  <h3>已质押 {{linux.pledgeCvnt}}CVNT</h3>-->
                  <h2>Linux挖矿</h2>
                  <h3>点击查看教程</h3>
              </div>
          </div>
      </div>
      <!--<div @click="goPcMiner" class="router-miner pc-miner">
          <div class="content">
              <img src="~assets/images/node/pc.png" alt="" />
              <div class="text">
                  &lt;!&ndash;<p>暂未开放</p>&ndash;&gt;
                  <h2>客户端挖矿质押</h2>
                  <h3>已质押 {{pc.pledgeCvnt}}CVNT</h3>
              </div>
          </div>
      </div>-->
      <!--<div class="tips">
        请先前往官网个人中心进行质押<br>
        <a  @click="goCvnIo" :href="cvnIo" target="_blank">cvn.io</a>
      </div>-->
  </div>


</template>

<script>

  import {judgeUserRole, newSuperNodeMiner, newDepositUserInfo, depositUserInfo } from 'api/register'

  import bridge from 'common/js/bridge'


  export default {
    /*beforeRouteEnter (to, from, next) {
      next((vm) => {
        let uid = to.query.uid;
        let token = to.query.token;
        /!*let superNodeUid = to.query.superNodeUid;
        if (superNodeUid) {
          if (uid == superNodeUid) {
            vm.status = 3;
          } else {
            vm.status = 2;
          }
          vm.superNodeUid = superNodeUid;
        } else {
          vm.status = 1;
        }*!/
        vm.uid = uid;
        vm.token = token;
        // vm.getUserRole();
        vm.getDepositUserInfo();
      })
    },*/
    beforeRouteEnter (to, from, next) {
      newDepositUserInfo().then((data) => {
        console.log(data);
        if (data.status && data.status == 1) {
        // this.type = data.data.level;
          if (data.data.role > 1) {
            next({path: '/newMining',
              replace: true,
              query: {
                uid: localStorage.getItem('uid'),
                token: localStorage.getItem('token')
              }});
          } else {
            next((vm) => {
              let uid = to.query.uid;
              let token = to.query.token;
              vm.uid = uid;
              vm.token = token;
              if (data.data.role == 1) {
                vm.status = 1;
              }
              if (data.data.role == 2) {
                vm.status = 2;
                vm.superNodeUid = data.data.super_node_id;
              }
              if (data.data.role == 3) {
                vm.status = 3;
                /*this.superNodeUid = data.data.super_node_id;*/
              }
            })
          }
        }
      }).catch((err) => {
          next((vm) => {
            vm.showToast(err.info, 'warn');
            let uid = to.query.uid;
            let token = to.query.token;
            let status = to.query.status;
            if (!status) {
              status = 1;
            }
            vm.uid = uid;
            vm.token = token;
            vm.status = Number(status);
          })
      })
    },
    data () {
      return {
        cvnIo: 'http://www.cvn.io',
        uid: '',
        token: '',
        superNodeUid: '',
        status: 1, /* 1表示普通用户，2表示旷工， 3表示超级节点 */
        invitationCode: '',
        showAds: false,
        availableCvnt: '--',
        router: {
          pledgeCvnt: '--',
          count: '--',
          miningCount: '--'
        },
        linux: {
          pledgeCvnt: '--',
          count: '--',
          miningCount: '--'
        },
        pc: {
          pledgeCvnt: '--',
          count: '--',
          miningCount: '--'
        }
      }
    },
    created () {

    },
    methods: {
        goCvnIo() {
            bridge.openBrowser(this.cvnIo);
        },
      getQueryVariable(variable) {
        let query = window.location.href.split('?')[1];
        let vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      },
      getUserRole() {
        judgeUserRole().then((data) => {/*this.uid, this.token*/
          // console.log(data);
          if (data.status && data.status == 1) {
            if (data.data.superNodeUid == 0) {
              this.status = 1;
            }
            if (this.uid == data.data.superNodeUid) {
              this.status = 3;
            } else if (this.uid != data.data.superNodeUid && data.data.superNodeUid != 0) {
              this.status = 2;
              this.superNodeUid = data.data.superNodeUid;
            }
          }
        })
      },
      getDepositUserInfo() {
        newDepositUserInfo().then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            if (data.data.role == 1) {
              this.status = 1;
            }
            if (data.data.role == 2) {
              this.status = 2;
              this.superNodeUid = data.data.super_node_id;
            }
            if (data.data.role == 3) {
              this.status = 3;
              /*this.superNodeUid = data.data.super_node_id;*/
            }
          }
        })
        /*depositUserInfo().then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            if (data.data.superNodeUid == 0) {
              this.status = 1;
            }
            /!*if (this.uid == data.data.superNodeUid) {
              this.status = 3;
            } else *!/if (data.data.superNodeUid != 0) {
              this.status = 2;
              this.superNodeUid = data.data.superNodeUid;
            }
            // this.status = data.data.status;
            this.availableCvnt = data.data.availableCvnt;
            this.router = data.data.router;
            this.linux = data.data.linux;
            this.pc = data.data.pc;
          }
        })*/
      },
      submitInvitationCode() {
        if (this.invitationCode == '') {
          /*const toast = this.$createToast({
            txt: '请输入超级节点邀请码！',
            type: 'warn'
          });
          toast.show();*/
          this.showToast('请输入超级节点邀请码！', 'warn');
          return;
        }
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;/**/
        newSuperNodeMiner(this.invitationCode).then((data) => {/* this.uid, this.token,  */
          if (data.status && data.status == 1) {
            this.isSubmiting = false;
            this.superNodeUid = this.invitationCode;
            this.invitationCode = '';
            this.showToast('加入成功！', 'correct');
            this.status = 2;
          }
        }).catch((err) => {
          // console.log(err);
          this.isSubmiting = false;
          // this.invitationCode = '';
          this.showToast(err.info, 'warn');
        })
      },
      goRouterMiner() {
        /*this.$router.push({path: '/routerMiner', query: {
            /!*availableCvnt: this.availableCvnt,
            count: this.router.count,
            miningCount: this.router.miningCount,
            pledgeCvnt: this.router.pledgeCvnt*!/
        }});*/
      },
      goLinuxMiner() {
        let href = 'http://appdown.cvn.io/CVNT_Community-Award.pdf';
        /*let href = 'http://www.hao123.com';*/
        try {
          bridge.openBrowser(href);
        } catch(e) {
          window.location.href = href;
        }
        /*this.$router.push({path: '/linuxMiner', query: {

        }});*/
      },
      goPcMiner() {
        /*this.$router.push({path: '/pcMiner', query: {

        }});*/
      },
      noOpen() {
        this.showToast('暂未开放！', 'warn');
        return;
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  body {
    background: #F5F5FB;
  }
  .page {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .normal-user{
    height:254px;
    background: url("~assets/images/node/normalbg.png") no-repeat center center;
    background-size: contain;
    h2{
      padding-top: 64px;
      margin:0 0 25px 62px;
      font-size:44px;
      font-weight:500;
      color:#fff;
      text-shadow:0 2px 2px rgba(1,95,118,0.5);
    }
    h3{
      margin:35px 0 38px 62px;
      font-size:30px;
      color:#fff;
    }
    h4{
      /*margin:0 62px;*/
      margin-left:62px;
      margin-bottom:12px;
      font-size:22px;
      color:#E9F7F9;
    }
    .input-wrapper{
      position:relative;
      margin:0 50px;
      height:84px;
      line-height:84px;
      input{
        display:inline-block;
        height:84px;
        line-height:84px;
        width:100%;
        background:#fff;
        border:1px solid rgba(216,224,238,1);
        border-radius:10px;
        text-indent:22px;
        font-size:24px;
        -webkit-appearance:none;
        outline:none;
      }
      span{
        position:absolute;
        top:0;
        right:0;
        display:inline-block;
        width:140px;
        height:84px;
        line-height:84px;
        font-size:30px;
        color:#fff;
        text-align:center;
        background:rgba(44,117,243,1);
        border-radius:0 10px 10px 0;
        cursor:pointer;
      }
    }
  }
  .miner-user{
    position:relative;
    background: url("~assets/images/node/minerbg.png") no-repeat center center;
    background-size: contain;
    p{
      position:absolute;
      top:20px;
      right:0;
      width:280px;
      height:44px;
      line-height:44px;
      font-size:22px;
      background:rgba(255,142,67,1);
      border-radius:22px 0 0 22px;
      color:#fff;
      text-align:center;
    }
    h3{
      color:#FEFEFE;
    }
  }

  .node-user{
    background: url("~assets/images/node/nodebg.png") no-repeat center center;
    background-size: contain;
    h3{
      color:#FCDFAD;
    }
  }
  .router-miner{
    height:200px;
    margin:32px 30px;
    background: url("~assets/images/node/routerbg.png") no-repeat center center;
    background-size: contain;
    .content{
      display:flex;
      justify-content:space-between;
      img{
        width:174px;
        height:174px;
        margin:15px 0 0 25px;
      }
      .text{
        position:relative;
        text-align:right;
        p{
          position:absolute;
          top:17px;
          right:0;
          width:160px;
          height:44px;
          line-height:44px;
          margin-bottom:20px;
          text-align:center;
          background:#2C75F3;
          border-radius:22px 0 0 22px;
          font-size:24px;
          color:#fff;
        }
        h2{
          /*margin-top:81px;*/
          margin-top:57px;
          margin-bottom:23px;
          margin-right:47px;
          font-size:40px;
          font-weight:500;
          color:rgba(255,255,255,1);
          text-shadow:0 2px 4px rgba(0,89,240,0.5);
        }
        h3{
          margin-right:47px;
          font-size:26px;
          font-weight:600;
          color:rgba(255,255,255,1);
          text-shadow:0 2px 4px rgba(117,3,159,0.5);
        }
      }
    }
  }

  .normal{
    margin-top:74px;
  }

  .linux-miner{
    background: url("~assets/images/node/linuxbg.png") no-repeat center center;
    background-size: contain;
    .content{
      .text{
        p{
          background:#795EFF;
        }
      }
    }
  }

  .pc-miner{
    background: url("~assets/images/node/pcbg.png") no-repeat center center;
    background-size: contain;
    .content{
      .text{
        p{
          background:#795EFF;
        }
      }
    }
  }


  .cube-scroll-wrapper{
    background:transparent!important;
  }
  .cube-popup .cube-popup-mask{
    opacity:0.5;
    background-color:#000;
  }


  input::-webkit-input-placeholder{
    color: #999;
    font-size:24px;
  }


  .tips {
    position:fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    white-space: nowrap;
    text-align: center;
    font-size: 24px;
    a {
      color: #5A74FB;
      text-decoration: underline;
    }
  }











</style>
